import React from 'react';
import { Cell, Popup, Picker } from 'react-vant';
import './PrioritySelect.css';

const PrioritySelect = ({ value, onChange }) => {
  const [showPicker, setShowPicker] = React.useState(false);

  // 优先级选项
  const options = [
    { text: '高', value: '高' },
    { text: '中', value: '中' },
    { text: '低', value: '低' }
  ];

  const handleConfirm = (val) => {
    onChange(val);
    setShowPicker(false);
  };

  return (
    <div className="priority-select">
      <div className="section-title">优先等级</div>
      
      <Cell 
        className="priority-cell"
        onClick={() => setShowPicker(true)}
      >
        <div className="priority-value">
          {value || '中'}
          <span className="arrow-icon">▼</span>
        </div>
      </Cell>

      <Popup
        visible={showPicker}
        position="bottom"
        round
        onClose={() => setShowPicker(false)}
      >
        <Picker
          columns={options}
          value={value}
          onConfirm={handleConfirm}
          onCancel={() => setShowPicker(false)}
          title="选择优先级"
        />
      </Popup>
    </div>
  );
};

export default PrioritySelect;